<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

<script type="text/javascript">
    var formId = "user";
    var PERMISSION_SUFFIX = "Permission";
    var PERMISSION_ON = "24";
    var PERMISSION_OFF = "55";
    var UNIT = "px";

    function switchPermissions(permissionLink, permissionName) {
        var imgSwitch = permissionLink.getElementsByTagName("div")[0].getElementsByTagName("img")[0];

        if (imgSwitch.style.left.indexOf(PERMISSION_ON) > -1) {
            imgSwitch.style.left = PERMISSION_OFF + UNIT;
            document.getElementById(permissionName + PERMISSION_SUFFIX).checked = false;
        } else {
            imgSwitch.style.left = PERMISSION_ON + UNIT;
            document.getElementById(permissionName + PERMISSION_SUFFIX).checked = true;
        }
    }

    $(document).ready(function () {
        var PORTAL_USER = "portalUser";
        var AUTHOR = "author";
        var REVIEWER = "reviewer";
        var GROUP_ADMIN = "groupAdmin";
        var SYS_ADMIN = "sysAdmin";

        var getImgSwitch = function (permissionName) {
            return document.getElementById(permissionName).getElementsByTagName("div")[0].getElementsByTagName("img")[0];
        }

        var initImgSwitch = function (permissionName) {
            if (document.getElementById(permissionName + PERMISSION_SUFFIX).checked) {
                getImgSwitch(permissionName).style.left = PERMISSION_ON + UNIT;
            } else {
                getImgSwitch(permissionName).style.left = PERMISSION_OFF + UNIT;
            }
        }

        initImgSwitch(PORTAL_USER);
        initImgSwitch(AUTHOR);
        initImgSwitch(REVIEWER);
        initImgSwitch(GROUP_ADMIN);
        initImgSwitch(SYS_ADMIN);
    });
</script>

<!-- Menu -->
<jsp:include page="menu.jsp"/>

<div class="sub_nav">
    <ul>
        <li>
            <a href="#">
                <img src="<%= request.getContextPath()%>/images/menu/sub_general_on.gif" alt="gernal"/>
            </a>
        </li>
    </ul>
</div>
<!--END: Subnav -->

<!--START: conent -->
<div class="content2">
<div class="insider">
<div class="corners">
<div class="corners_top"></div>
<div class="column1">
<div class="col_l">
    <spring:form modelAttribute="user" id="user" method="post" htmlEscape="true">

        <!-- Mark the type of the submit action -->
        <input type="hidden" id="submitAction" name="submitAction"/>
        <input type="hidden" id="from" name="from"/>

        <table width="360" border="0" cellspacing="4" class="formlayout_table">
            <tr>
                <th width="172"><label>User ID:</label></th>
                <td width="172" class="bg_n">
                    <c:if test="${IS_CREATE}">
                        <input type="text" name="username" class="input1" value="${user.username}"/>
                    </c:if>
                    <c:if test="${IS_EDIT}">
                        ${user.username}
                    </c:if>
                </td>
            </tr>

            <tr>
                <th><label>First Name:</label></th>
                <td class="bg_n">
                    <input type="text" name="firstname" class="input1" value="${user.firstname}"
                           maxlength="20"/>
                </td>
            </tr>

            <tr>
                <th><label>Last Name:</label></th>
                <td class="bg_n">
                    <input type="text" name="lastname" class="input1" value="${user.lastname}" maxlength="20"/>
                </td>
            </tr>

            <tr>
                <th><label>Email:</label></th>
                <td class="bg_n">
                    <input type="text" name="email" class="input1" value="${user.email}" maxlength="255"/>
                </td>
            </tr>

            <tr>
                <th><label>Password:</label></th>
                <td class="bg_n">
                    <input type="password" name="password" class="input1" value="${user.password}"/>
                </td>
            </tr>

            <tr>
                <th><label>Confirm Password:</label></th>
                <td class="bg_n">
                    <input type="password" name="confirmPassword" class="input1" value="${user.confirmPassword}"/>
                </td>
            </tr>

            <tr>
                <th><label>Group:</label></th>
                <td class="bg_n">
                    <security:authorize ifAnyGranted="ROLE_SYS_ADMIN">
                        <select name="userGroup.name" class="select1">
                            <option value="NULL" selected>Please Select a Group</option>
                            <c:forEach var="group" items="${groups}">
                                <option value="${group}" ${user.userGroup.name == group ? 'selected' : ''}>
                                        ${group}
                                </option>
                            </c:forEach>
                        </select>
                    </security:authorize>
                    <security:authorize ifAnyGranted="ROLE_GROUP_ADMIN">
                        ${user.userGroup.name}
                    </security:authorize>
                </td>
            </tr>

            <tr>
                <th height="10"></th>
                <td class="bg_n">
                </td>
            </tr>

            <tr>
                <th><label>Portal User:</label></th>
                <td class="bg_n">
                    <a id="portalUser" href="#" onclick="switchPermissions(this, this.id);">
                        <div name="a" class="switch">
                            <img class="user_permission_btn"
                                 src="<%= request.getContextPath()%>/images/btn/switch_on.gif"
                                 style="left:55px;"/>
                        </div>
                    </a>
                </td>
            </tr>

            <tr>
                <th><label>Author:</label></th>
                <td class="bg_n">
                    <a id="author" href="#" onclick="switchPermissions(this, this.id);">
                        <div class="switch">
                            <img src="<%= request.getContextPath()%>/images/btn/switch_on.gif"
                                 style="left:55px;"/>
                        </div>
                    </a>
                </td>
            </tr>

            <tr>
                <th><label>Reviewer:</label></th>
                <td class="bg_n">
                    <a id="reviewer" href="#" onclick="switchPermissions(this, this.id);">
                        <div class="switch">
                            <img src="<%= request.getContextPath()%>/images/btn/switch_on.gif"
                                 style="left:55px;"/>
                        </div>
                    </a>
                </td>
            </tr>

            <tr>
                <th><label>Group Administrator:</label></th>
                <td class="bg_n">
                    <a id="groupAdmin" href="#" onclick="switchPermissions(this, this.id);">
                        <div class="switch">
                            <img src="<%= request.getContextPath()%>/images/btn/switch_on.gif"
                                 style="left:55px;"/>
                        </div>
                    </a>
                </td>
            </tr>

            <security:authorize ifAnyGranted="ROLE_SYS_ADMIN">
                <tr>
                    <th><label>System Administrator:</label></th>
                    <td class="bg_n">
                        <a id="sysAdmin" href="#" onclick="switchPermissions(this, this.id);">
                            <div class="switch">
                                <img src="<%= request.getContextPath()%>/images/btn/switch_on.gif"
                                     style="left:55px;"/>
                            </div>
                        </a>
                    </td>
                </tr>
            </security:authorize>

            <div style="display:none">
                <input type="checkbox" id="portalUserPermission"
                       name="permissions" ${permissions['ROLE_PORTAL_USER'] ? 'checked' : ''}
                       value="ROLE_PORTAL_USER"/> Portal User
                | <input type="checkbox" id="authorPermission"
                         name="permissions" ${permissions['ROLE_AUTHOR'] ? 'checked' : ''} value="ROLE_AUTHOR"/>
                Author
                | <input type="checkbox" id="reviewerPermission"
                         name="permissions" ${permissions['ROLE_REVIEWER'] ? 'checked' : ''}
                         value="ROLE_REVIEWER"/> Reviewer
                | <input type="checkbox" id="groupAdminPermission"
                         name="permissions" ${permissions['ROLE_GROUP_ADMIN'] ? 'checked' : ''}
                         value="ROLE_GROUP_ADMIN"/> Group Admin
                | <input type="checkbox" id="sysAdminPermission"
                         name="permissions" ${permissions['ROLE_SYS_ADMIN'] ? 'checked' : ''}
                         value="ROLE_SYS_ADMIN"/> Sys Admin
                <input type="hidden" name="_permissions"/>
            </div>
        </table>
    </spring:form>
</div>
<table width="360" border="0" cellspacing="4" class="formlayout_table fr">
    <tr>
        <th width="172"><label>Account Status:</label></th>
        <td width="172">
            <c:if test="${user.enabled}">Enabled</c:if>
            <c:if test="${!user.enabled}">Disabled</c:if>
        </td>
    </tr>

    <tr>
        <th><label>Last Modified Date:</label></th>
        <td>
            <fmt:formatDate value="${user.modifiedOn}" pattern="dd-MMM-yyyy"/>
        </td>
    </tr>

    <tr>
        <th><label>Last Modified By:</label></th>
        <td>${user.modifiedBy.username}</td>
    </tr>

    <tr>
        <th><label>Disabled By:</label></th>
        <td>${user.disabledBy}</td>
    </tr>

    <tr>
        <th><label>Disabled Date:</label></th>
        <td>
            <fmt:formatDate value="${user.disabledOn}" pattern="dd-MMM-yyyy"/>
        </td>
    </tr>

    <tr>
        <th><label>Disable Notes:</label></th>
        <td>${user.disabledNote}</td>
    </tr>
</table>
</div>

<!-- Function1 -->
<jsp:include page="../common/commonFunction.jsp"/>

<div class="corners_bottom"></div>
</div>

<div class="message">
    ${message}
    ${empty message ? '' : '<br />'}

    <div style="color:red">
        ${errors['username.errors'][0]}
        ${empty errors['username.errors'] ? '' : '<br />'}

        ${errors['firstname.errors'][0]}
        ${empty errors['firstname.errors'] ? '' : '<br />'}

        ${errors['lastname.errors'][0]}
        ${empty errors['lastname.errors'] ? '' : '<br />'}

        ${errors['email.errors'][0]}
        ${empty errors['email.errors'] ? '' : '<br />'}

        ${errors['password.errors'][0]}
        ${empty errors['password.errors'] ? '' : '<br />'}

        ${errors['confirmPassword.errors'][0]}
        ${empty errors['confirmPassword.errors'] ? '' : '<br />'}

        ${errors['userGroup.errors'][0]}
        ${empty errors['userGroup.errors'] ? '' : '<br />'}

        ${errors['permissions.errors'][0]}
        ${empty errors['permissions.errors'] ? '' : '<br />'}
    </div>
</div>
</div>
</div>
<!--END: conent -->

<div class="footer"></div>
